<template>
  <div class="contanier">
    <div class="contanier-title">试题管理</div>
    <search-form>
      <template v-slot:formLeft>
        <el-form :inline="true" :model="userFormLine" class="demo-form-inline">
          <!-- <div class="search-content"> -->
            <el-row :gutter="20" class="search-row">
              <el-col :span="6">
                <div class="grid-content bg-purple">
                  <el-form-item label="题目标签">
                    <!-- <el-input v-model="userFormLine.labels" placeholder="请选择题目标签"></el-input> -->
                    <el-select
                      v-model="userFormLine.labels"
                      placeholder="请选择题目标签"
                      :style="{ width: '100%' }"
                    >
                      <el-option
                        v-for="(item, index) in labelsOptions"
                        :key="index"
                        :label="item.fullName"
                        :value="item.enCode"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="grid-content bg-purple">
                  <el-form-item label="题干关键字">
                    <el-input v-model="userFormLine.title" placeholder="请输入题干关键字"></el-input>
                  </el-form-item>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="grid-content bg-purple">
                  <el-form-item label="状态">
                    <el-select v-model="userFormLine.enabledMark" placeholder="请选择状态">
                      <el-option label="全部" value=""></el-option>
                      <el-option label="启用" value="1"></el-option>
                      <el-option label="禁用" value="0"></el-option>
                    </el-select>
                  </el-form-item>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="grid-content bg-purple">
                  <el-form-item label="试题ID号">
                    <el-input v-model="userFormLine.parentId" placeholder="请输入试题ID号" style="width: 199px"></el-input>
                  </el-form-item>
                </div>
              </el-col>
            </el-row>
          <!-- </div> -->
        </el-form>
      </template>
      <template v-slot:formRight>
        <div class="formRight-btn">
          <el-button icon="el-icon-refresh" class="overPosBtn" style="width: 104px;" @click="resetForm">重 置</el-button>
          <el-button type="primary" @click="onSubmit" icon="el-icon-search" style="width: 104px;" class="set-col-btn">查 询</el-button>
        </div>
      </template>
    </search-form>
    <div>
      <search-table>
        <template v-slot:daochu>
          <div class="set-table-right">
            <el-button icon="el-icon-setting" class="config-btn" style="height: 36px;" @click="handleTagConfigClick">题目标签配置</el-button>
            <el-button icon="el-icon-my-add" class="common-btn" style="height: 36px;" @click="handleAdd">新增</el-button>
            <el-button icon="el-icon-my-message" class="common-btn" style="height: 36px;" @click="handleImport">导 入</el-button>
          </div>
        </template>
        <template v-slot:biaoge>
          <template>
            <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
              @selection-change="handleSelectionChange" class="table-top" :header-cell-style="{
                backgroundColor: '#f5f7fa',
                color: '#606266'
              }">
              <!-- <el-table-column type="selection" width="55" :selectable="checkSelectable" align="center"> -->
              <el-table-column type="selection" width="55" align="center">
              </el-table-column>
              <el-table-column type="index" width="55" label="序号" align="center">
              </el-table-column>
              <el-table-column label="题目标签" width="220">
                <template slot-scope="scope">
                  {{ scope.row.labels | dynamicText(labelListOptions) }}
                  <!-- <div class="gizall">
                    <div class="tag" v-if="scope.row.labels">{{ scope.row.labels }}</div>
                    <span v-else>--</span>
                  </div> -->
                </template>
              </el-table-column>
              <el-table-column prop="parentId" label="试题ID号" width="180">
                <template slot-scope="scope">
                  <div class="gizall">
                    <!-- <div class="gjz">{{ scope.row.parentId }}</div> -->
                    <div>{{ scope.row.parentId }}</div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="questionType" label="题目类型" width="220">
                <template slot-scope="scope">
                  <div class="gizall">
                    <div class="tag" v-if="scope.row.questionType">{{ getQuestionNumTypes(scope.row.questionType) }}</div>
                    <span v-else>--</span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="description" label="题干关键字">
                <template slot-scope="scope">
                  <div class="gizall">
                    <div class="gjz keywords" v-if="scope.row.description">{{ scope.row.description }}</div>
                    <span v-else>--</span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="enabledMark" label="状态" width="100">
                <template slot-scope="scope">
                  <el-switch 
                    v-model="scope.row.enabledMark" 
                    active-color="#2265ee" 
                    inactive-color="#a4afca"
                    :active-value="true"
                    :inactive-value="false"
                    @change="handleStatusChange(scope.row)">
                  </el-switch>
                </template>
              </el-table-column>
              <el-table-column fixed="right" label="操作" width="280">
                <template slot-scope="scope">
                  <el-button @click="handleEdit(scope.row)" type="text" icon="el-icon-edit"
                    class="set-table-btn set-table-btn-col" size="small">
                    编辑
                  </el-button>
                  <el-button @click="handleDetail(scope.row)" type="text" icon="el-icon-document" size="small"
                    class="set-table-btn set-table-btn-col">
                    详情
                  </el-button>
                  <el-button @click="handleDelete(scope.row)" type="text" icon="el-icon-delete" size="small"
                    style="color: #D91515;" class="set-table-btn set-table-btn-col2">
                    删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </template>
      </search-table>
    </div>
    <!-- <el-dialog :title="'新增 |'+questionType" :visible.sync="showAdd" append-to-body custom-class="right-dialog">
        </el-dialog> -->
    <!-- <el-dialog
      title="提示"
      :visible.sync="showAdd"
      custom-class="right-dialog"
      width="30%"
      append-to-body
    > -->
    <!-- 对话框内容 -->
    <!-- <span slot="footer" class="dialog-footer">
        <el-button @click="showAdd = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog> -->
    <el-drawer 
      :visible.sync="showAdd" 
      :with-header="false" 
      direction="rtl"
      size="40%"
    >
      <div class="drawer-container">
        <!-- 左侧题型选择 -->
        <div class="drawer-left" v-if="!isEdit && !isDetail">
          <div class="drawer-left-title">试题类型选择</div>
          <div class="drawer-left-content">
            <div class="item" @click="handleQuestionTypeSelect(3)">
              <img src="../../assets/test/xz.png" class="pic" />
              <div>选择题</div>
            </div>
            <div class="item" @click="handleQuestionTypeSelect(1)">
              <img src="../../assets/test/pd.png" class="pic" />
              <div>判断题</div>
            </div>
            <!-- <div class="item" @click="handleQuestionTypeSelect(4)">
              <img src="../../assets/test/wd.png" class="pic" />
              <div>问答题</div>
            </div>
            <div class="item" @click="handleQuestionTypeSelect(2)">
              <img src="../../assets/test/tk.png" class="pic" />
              <div>填空题</div>
            </div> -->
          </div>
        </div>
        <!-- 右侧内容 -->
        <div class="drawer-right">
          <div class="drawer-title">
            <div class="drawer-title-left">
              {{ isDetail ? '详情' : (isEdit ? '编辑' : '新增') }}
            </div>
            <div class="drawer-title-right" @click="showAdd = false">
              <i class="el-icon-close" style="font-size: 14px;color: #A4AFCA;"></i>
            </div>
          </div>
          <!-- 添加一个标志来判断是否已经添加过题目 -->
          <template v-if="hasQuestions">
            <div class="drawer-content" style="display:flex;flex-direction:column;gap: 24px;">
              <!-- 所有题目列表 -->
              <template v-for="(item, index) in allQuestions">
                <!-- 添加题型标题 -->
                <div class="question-title" :key="'title'+index">
                  {{ index + 1 }}.{{ getQuestionTypeName(item.type) }}
                </div>
                <!-- 选择题 -->
                <div v-if="item.type === 3" class="newContent" :key="'xz'+index">
                  <div class="header">
                    <img class="logo" src="../../assets/test/delete.png" v-if="!isDetail"
                      @click="todelete(index)" />
                  </div>
                  <div class="item">
                    <div class="header2">
                      <img src="../../assets/test/timu .png" class="t1">
                      <div class="t2">题目</div>
                    </div>
                    <div style="margin: 24px 0;">
                      <template v-if="isDetail">
                        <inputTi
                          :isTitle="true"
                          :idx="index"
                          :inputVal="item.title"
                          :placeholder="'请输入内容'"
                          :fileList="item.titimgs || []"
                          :disabled="true"
                          type="textarea"
                          :autosize="{ minRows: 4 }"
                          style="width: 100%;"
                          class="bordered-input"
                        />
                      </template>
                      <template v-else>
                        <inputTi
                          :isTitle="true"
                          :idx="index"
                          :inputVal="item.title"
                          :placeholder="'请输入内容'"
                          :fileList="item.titimgs || []"
                          :disabled="isDetail"
                          type="textarea"
                          :autosize="{ minRows: 4 }"
                          @input="titleChange"
                          @changeImg="titimgChange"
                          style="width: 100%;"
                          class="bordered-input"
                        />
                      </template>
                    </div>
                  </div>
                  <div class="item">
                    <div class="headerOption">
                      <div class="header2">
                        <img src="../../assets/test/answer.png" class="t1">
                        <div class="t2">选项<div class="t21">（答案可多选）</div></div>
                      </div>
                      <div class="addOptionBtn"  @click.stop="addOption(item)" v-if="!isDetail">
                        <!-- <i class="el-icon-plus" @click.stop="addOption(item)"></i> -->
                        <img src="../../assets/del.png" style="width: 24px; height: 24px" />
                      </div>
                    </div>
                    <div class="txda">
                      <el-row>
                        <el-col :span="24">
                          <el-checkbox-group v-model="item.checkList" :disabled="isDetail" >
                            <el-row v-for="(option, optionIndex) in item.options" :key="optionIndex">
                              <el-col :span="2">
                                <el-checkbox :label="option.label" style="padding: 10px 0 0 0; box-sizing: border-box;" :disabled="isDetail">
                                </el-checkbox>
                              </el-col>
                              <el-col :span="20" style="padding-left: 10px; box-sizing: border-box;">
                                <template v-if="isDetail">
                                  <inputTi
                                    :isOptions="true"
                                    :isTitle="true"
                                    :idx="index"
                                    :cIdx="optionIndex"
                                    :inputVal="option.content"
                                    :placeholder="'请输入内容'"
                                    :fileList="option.img || []"
                                    :disabled="true"
                                    type="textarea"
                                    :autosize="{ minRows: 4 }"
                                    class="question1"
                                  />
                                </template>
                                <template v-else>
                                  <inputTi
                                    :isOptions="true"
                                    :isTitle="true"
                                    :idx="index"
                                    :cIdx="optionIndex"
                                    :inputVal="option.content"
                                    :placeholder="'请输入内容'"
                                    :fileList="option.img || []"
                                    :disabled="isDetail"
                                    type="textarea"
                                    :autosize="{ minRows: 4 }"
                                    @input="titleChoiceChange"
                                    @changeImg="titChoiceImgChange"
                                    class="question1"
                                  />
                                </template>
                              </el-col>
                              <el-col :span="2" v-if="!isDetail && item.options.length > 2">
                                <div class="deleteOption" style="cursor: pointer;"
                                  @click.stop="deleteOption(item, optionIndex)">
                                  <i class="el-icon-delete" @click.stop="deleteOption(item, optionIndex)"></i>
                                </div>
                              </el-col>
                            </el-row>
                          </el-checkbox-group>
                        </el-col>
                      </el-row>
                    </div>
                  </div>
                  <div class="item">
                    <div class="header2">
                      <img src="../../assets/test/tggjz.png" class="t1">
                      <div class="t2">题干关键字</div>
                    </div>
                    <div style="margin: 24px 0;">
                      <el-input
                        v-model="item.description"  
                        placeholder="请输入内容"
                        :disabled="isDetail"
                        style="width: 100%;"
                        type="textarea"
                        maxlength="200"
                        show-word-limit
                      />
                    </div>
                  </div>

                  <div class="item">
                    <div class="header2">
                      <img src="../../assets/test/default.png" class="t1">
                      <div class="t2">难度</div>
                    </div>
                    <el-row :gutter="15" style="width: 100%;margin: 0 0 24px 0">
                      <el-col :span="8">
                        <div class="trapezoid trapezoid1" 
                            :class="{ 'active': item.difficultyGradeId >= '1' }"
                            @click="selectDifficulty(item, '1')"></div>
                      </el-col>
                      <el-col :span="8">
                        <div class="trapezoid trapezoid2" 
                            :class="{ 'active': item.difficultyGradeId >= '2' }"
                            @click="selectDifficulty(item, '2')"></div>
                      </el-col>
                      <el-col :span="8">
                        <div class="trapezoid trapezoid3" 
                            :class="{ 'active': item.difficultyGradeId >= '3' }"
                            @click="selectDifficulty(item, '3')"></div>
                      </el-col>
                    </el-row>
                  </div>

                  <!-- <div class="item">
                    <div class="header2">
                      <img src="../../assets/test/default.png" class="t1">
                      <div class="t2">难度</div>
                    </div>
                    <el-row :gutter="15" style="width: 100%;margin: 0 0 24px 0">
                      <el-col :span="8">
                        <div class="trapezoid" :class="{ 'active': item.difficultyGradeId === '1' }"
                          @click="selectDifficulty(item, '1')"></div>
                      </el-col>
                      <el-col :span="8">
                        <div class="trapezoid2" :class="{ 'active': item.difficultyGradeId === '2' }"
                          @click="selectDifficulty(item, '2')"></div>
                      </el-col>
                      <el-col :span="8">
                        <div class="trapezoid3" :class="{ 'active': item.difficultyGradeId === '3' }"
                          @click="selectDifficulty(item, '3')"></div>
                      </el-col>
                    </el-row>
                  </div> -->
                </div>
                <!-- 判断题 -->
                <div v-if="item.type === 1" class="newContent" :key="'pd'+index">
                  <div class="header">
                    <img class="logo" src="../../assets/test/delete.png" v-if="!isDetail"
                      @click="todelete(index)" />
                  </div>
                  <div class="item">
                    <div class="header2">
                      <img src="../../assets/test/timu .png" class="t1">
                      <div class="t2">题目</div>
                    </div>
                    <div style="margin: 24px 0;">
                      <template v-if="isDetail">
                        <inputTi
                          :isTitle="true"
                          :idx="index"
                          :inputVal="item.title"
                          :placeholder="'请输入内容'"
                          :fileList="item.titimgs || []"
                          :disabled="true"
                          type="textarea"
                          :autosize="{ minRows: 4 }"
                          style="width: 100%;"
                          class="bordered-input"
                        />
                      </template>
                      <template v-else>
                        <inputTi
                          :isTitle="true"
                          :idx="index"
                          :inputVal="item.title"
                          :placeholder="'请输入内容'"
                          :fileList="item.titimgs || []"
                          :disabled="isDetail"
                          type="textarea"
                          :autosize="{ minRows: 4 }"
                          @input="titleChange"
                          @changeImg="titimgChange"
                          style="width: 100%;"
                          class="bordered-input"
                        />
                      </template>
                    </div>
                  </div>
                  <div class="item">
                    <div class="header2">
                      <img src="../../assets/test/answer.png" class="t1">
                      <div class="t2">答案</div>
                    </div>
                    <div class="twobutton">
                      <div class="button1" :class="{ 'active': item.answer === '1', 'disabled': isDetail }"
                        @click="!isDetail && selectAnswer(item, '1')">正确</div>
                      <div class="button1" :class="{ 'active': item.answer === '0', 'disabled': isDetail }"
                        @click="!isDetail && selectAnswer(item, '0')">错误</div>
                    </div>
                  </div>
                  <div class="item">
                    <div class="header2">
                      <img src="../../assets/test/tggjz.png" class="t1">
                      <div class="t2">题干关键字</div>
                    </div>
                    <div style="margin: 24px 0;">
                      <el-input
                        v-model="item.description"
                        placeholder="请输入内容"
                        :disabled="isDetail"
                        style="width: 100%;"
                        type="textarea"
                        maxlength="200"
                        show-word-limit
                      />
                    </div>
                  </div>

                  <!-- <div class="item">
                    <div class="header2">
                      <img src="../../assets/test/default.png" class="t1">
                      <div class="t2">难度</div>
                    </div>
                    <el-row :gutter="15" style="width: 100%;margin: 0 0 24px 0">
                      <el-col :span="8">
                        <div class="trapezoid" :class="{ 'active': item.difficultyGradeId === '1', 'disabled': isDetail }"
                          @click="!isDetail && selectDifficulty(item, '1')"></div>
                      </el-col>
                      <el-col :span="8">
                        <div class="trapezoid2" :class="{ 'active': item.difficultyGradeId === '2', 'disabled': isDetail }"
                          @click="!isDetail && selectDifficulty(item, '2')"></div>
                      </el-col>
                      <el-col :span="8">
                        <div class="trapezoid3" :class="{ 'active': item.difficultyGradeId === '3', 'disabled': isDetail }"
                          @click="!isDetail && selectDifficulty(item, '3')"></div>
                      </el-col>
                    </el-row>
                  </div> -->

                  
                  <div class="item">
                    <div class="header2">
                      <img src="../../assets/test/default.png" class="t1">
                      <div class="t2">难度</div>
                    </div>
                    <el-row :gutter="15" style="width: 100%;margin: 0 0 24px 0">
                      <el-col :span="8">
                        <div class="trapezoid trapezoid1"
                            :class="{ 'active': item.difficultyGradeId >= '1' }"
                            @click="selectDifficulty(item, '1')"></div>
                      </el-col>
                      <el-col :span="8">
                        <div class="trapezoid trapezoid2" 
                            :class="{ 'active': item.difficultyGradeId >= '2' }"
                            @click="selectDifficulty(item, '2')"></div>
                      </el-col>
                      <el-col :span="8">
                        <div class="trapezoid trapezoid3" 
                            :class="{ 'active': item.difficultyGradeId >= '3' }"
                            @click="selectDifficulty(item, '3')"></div>
                      </el-col>
                    </el-row>
                  </div>
                </div>
                
                <!-- 问答题 -->
                <div v-if="item.type === 4" class="newContent" :key="'wd'+index">
                  <div class="header">
                    <img class="logo" src="../../assets/test/delete.png" v-if="!isDetail"
                      @click="todelete(index)"></img>
                  </div>
                  <div class="item">
                    <div class="header2">
                      <img src="../../assets/test/timu .png" class="t1">
                      <div class="t2">题目</div>
                    </div>
                    <div style="margin: 24px 0;">
                      <template v-if="isDetail">
                        <inputTi
                          :isTitle="true"
                          :idx="index"
                          :inputVal="item.title"
                          :placeholder="'请输入内容'"
                          :fileList="item.titimgs || []"
                          :disabled="true"
                          type="textarea"
                          :autosize="{ minRows: 4 }"
                          style="width: 100%;"
                          class="bordered-input"
                        />
                      </template>
                      <template v-else>
                        <inputTi
                          :isTitle="true"
                          :idx="index"
                          :inputVal="item.title"
                          :placeholder="'请输入内容'"
                          :fileList="item.titimgs || []"
                          :disabled="isDetail"
                          type="textarea"
                          :autosize="{ minRows: 4 }"
                          @input="titleChange"
                          @changeImg="titimgChange"
                          style="width: 100%;"
                          class="bordered-input"
                        />
                      </template>
                    </div>
                  </div>
                  <div class="item">
                    <div class="header2">
                      <img src="../../assets/test/answer.png" class="t1">
                      <div class="t2">答案</div>
                    </div>
                    <div class="txda">
                      <el-row>
                        <el-col :span="22">
                          <el-input v-model="item.answer" placeholder="请输入内容" :disabled="isDetail"></el-input>
                          <!-- <template v-if="isDetail">
                            <inputTi
                              :isTitle="true"
                              :idx="index"
                              :inputVal="option.content"
                              :placeholder="'请输入内容'"
                              :fileList="option.titimgs || []"
                              :disabled="true"
                              type="textarea"
                              :autosize="{ minRows: 4 }"
                              style="width: 100%; border: 1px solid #DCDFE6; border-radius: 3px;"
                              class="question1"
                            />
                          </template>
                          <template v-else>
                            <inputTi
                              :isTitle="true"
                              :idx="optionIndex"
                              :inputVal="option.content"
                              :placeholder="'请输入内容'"
                              :fileList="option.img || []"
                              :disabled="isDetail"
                              type="textarea"
                              :autosize="{ minRows: 4 }"
                              @input="titleChoiceChange"
                              @changeImg="titChoiceImgChange"
                              style="width: 100%; border: 1px solid #DCDFE6; border-radius: 3px;"
                              class="question1"
                            />
                          </template> -->
                        </el-col>
                      </el-row>
                    </div>
                  </div>
                  <div class="item">
                    <div class="header2">
                      <img src="../../assets/test/tggjz.png" class="t1">
                      <div class="t2">题干关键字</div>
                    </div>
                    <div style="margin: 24px 0;">
                      <el-input
                        v-model="item.description"
                        placeholder="请输入内容"
                        :disabled="isDetail"
                        style="width: 100%;"
                        type="textarea"
                        maxlength="200"
                        show-word-limit
                      />
                    </div>
                  </div>
                  <!-- <div class="item">
                    <div class="header2">
                      <img src="../../assets/test/default.png" class="t1">
                      <div class="t2">难度</div>
                    </div>
                    <el-row :gutter="15" style="width: 100%;margin: 0 0 24px 0">
                      <el-col :span="8">
                        <div class="trapezoid" :class="{ 'active': item.difficultyGradeId === '1' }"
                          @click="selectDifficulty(item, '1')"></div>
                      </el-col>
                      <el-col :span="8">
                        <div class="trapezoid2" :class="{ 'active': item.difficultyGradeId === '2' }"
                          @click="selectDifficulty(item, '2')"></div>
                      </el-col>
                      <el-col :span="8">
                        <div class="trapezoid3" :class="{ 'active': item.difficultyGradeId === '3' }"
                          @click="selectDifficulty(item, '3')"></div>
                      </el-col>
                    </el-row>
                  </div> -->
                  <div class="item">
                    <div class="header2">
                      <img src="../../assets/test/default.png" class="t1">
                      <div class="t2">难度</div>
                    </div>
                    <el-row :gutter="15" style="width: 100%;margin: 0 0 24px 0">
                      <el-col :span="8">
                        <div class="trapezoid trapezoid1"
                            :class="{ 'active': item.difficultyGradeId >= '1' }"
                            @click="selectDifficulty(item, '1')"></div>
                      </el-col>
                      <el-col :span="8">
                        <div class="trapezoid trapezoid2" 
                            :class="{ 'active': item.difficultyGradeId >= '2' }"
                            @click="selectDifficulty(item, '2')"></div>
                      </el-col>
                      <el-col :span="8">
                        <div class="trapezoid trapezoid3" 
                            :class="{ 'active': item.difficultyGradeId >= '3' }"
                            @click="selectDifficulty(item, '3')"></div>
                      </el-col>
                    </el-row>
                  </div>
                </div>

                <!-- 填空题 -->
                <div v-if="item.type === 2" class="newContent" :key="'tk'+index">
                  <div class="header">
                    <img class="logo" src="../../assets/test/delete.png" v-if="!isDetail"
                      @click="todelete(index)"></img>
                  </div>
                  <div class="item">
                    <div class="header2">
                      <img src="../../assets/test/timu .png" class="t1">
                      <div class="t2">题目</div>
                    </div>
                    <div style="margin: 24px 0;">
                      <template v-if="isDetail">
                        <inputTi
                          :isTitle="true"
                          :idx="index"
                          :inputVal="item.title"
                          :placeholder="'请输入内容'"
                          :fileList="item.titimgs || []"
                          :disabled="true"
                          type="textarea"
                          :autosize="{ minRows: 4 }"
                          style="width: 100%;"
                          class="bordered-input"
                        />
                      </template>
                      <template v-else>
                        <inputTi
                          :isTitle="true"
                          :idx="index"
                          :inputVal="item.title"
                          :placeholder="'请输入内容'"
                          :fileList="item.titimgs || []"
                          :disabled="isDetail"
                          type="textarea"
                          :autosize="{ minRows: 4 }"
                          @input="titleChange"
                          @changeImg="titimgChange"
                          style="width: 100%;"
                          class="bordered-input"
                        />
                      </template>
                    </div>
                  </div>
                  <div class="item">
                    <div class="header2">
                      <img src="../../assets/test/answer.png" class="t1">
                      <div class="t2">答案</div>
                    </div>
                    <div class="txda">
                      <el-row>
                        <el-col :span="2">
                          <div class="tktitle">填空</div>
                        </el-col>
                        <el-col :span="21">
                          <el-input v-model="item.answer" placeholder="请输入内容" :disabled="isDetail"></el-input>
                        </el-col>
                      </el-row>
                    </div>
                  </div>
                  <div class="item">
                    <div class="header2">
                      <img src="../../assets/test/tggjz.png" class="t1">
                      <div class="t2">题干关键字</div>
                    </div>
                    <div style="margin: 24px 0;">
                      <el-input
                        v-model="item.description"
                        placeholder="请输入内容"
                        :disabled="isDetail"
                        style="width: 100%;"
                        type="textarea"
                        maxlength="200"
                        show-word-limit
                      />
                    </div>
                  </div>
                  <!-- <div class="item">
                    <div class="header2">
                      <img src="../../assets/test/default.png" class="t1">
                      <div class="t2">难度</div>
                    </div>
                    <el-row :gutter="15" style="width: 100%;margin: 0 0 24px 0">
                      <el-col :span="8">
                        <div class="trapezoid" :class="{ 'active': item.difficultyGradeId === '1' }"
                          @click="selectDifficulty(item, '1')"></div>
                      </el-col>
                      <el-col :span="8">
                        <div class="trapezoid2" :class="{ 'active': item.difficultyGradeId === '2' }"
                          @click="selectDifficulty(item, '2')"></div>
                      </el-col>
                      <el-col :span="8">
                        <div class="trapezoid3" :class="{ 'active': item.difficultyGradeId === '3' }"
                          @click="selectDifficulty(item, '3')"></div>
                      </el-col>
                    </el-row>
                  </div> -->
                  <div class="item">
                    <div class="header2">
                      <img src="../../assets/test/default.png" class="t1">
                      <div class="t2">难度</div>
                    </div>
                    <el-row :gutter="15" style="width: 100%;margin: 0 0 24px 0">
                      <el-col :span="8">
                        <div class="trapezoid trapezoid1"
                            :class="{ 'active': item.difficultyGradeId >= '1' }"
                            @click="selectDifficulty(item, '1')"></div>
                      </el-col>
                      <el-col :span="8">
                        <div class="trapezoid trapezoid2" 
                            :class="{ 'active': item.difficultyGradeId >= '2' }"
                            @click="selectDifficulty(item, '2')"></div>
                      </el-col>
                      <el-col :span="8">
                        <div class="trapezoid trapezoid3" 
                            :class="{ 'active': item.difficultyGradeId >= '3' }"
                            @click="selectDifficulty(item, '3')"></div>
                      </el-col>
                    </el-row>
                  </div>
                </div>
              </template>
            </div>
            <div class="drawer-footer" style="padding: 20px 0 0 0;" v-if="!isDetail">
              <el-button :loading="isAdding" :disabled="isAdding" @click="cancelForm" style="width: 104px;height: 36px;">保存</el-button>
              <el-button type="primary" :loading="isAdding" :disabled="isAdding" @click="submitQuestion"
                style="background-color: #2265EE;width: 104px;height: 36px;">提交</el-button>
            </div>
          </template>
          <!-- 未选择题型时显示提示 -->
          <div v-else class="empty-content">
            <div class="empty-tip">请选择左侧题型</div>
          </div>
        </div>
      </div>
    </el-drawer>

    <!-- 题目标签配置弹窗 -->
    <el-dialog title="题目标签配置" :visible.sync="showTagConfig" width="500px" :close-on-click-modal="false" custom-class="tag-config-dialog">
      <el-form ref="tagConfigForm" :model="tagConfigForm" :rules="tagConfigRules" label-width="80px">
        <!-- <el-form-item label="序号" v-if="selectedIndex">
          <el-input v-model="tagConfigForm.id" disabled placeholder="选中题目的序号">
          </el-input>
        </el-form-item> -->
        <el-form-item label="已选中" prop="ids">
          <div>已选择 {{ multipleSelection.length }} 条记录</div>
        </el-form-item>
        <el-form-item label="题目标签" prop="tag">
          <!-- <el-input v-model="tagConfigForm.tag" placeholder="请输入题目标签">
          </el-input> -->
          <!-- <el-select v-model="tagConfigForm.tag" placeholder="请选择题目标签" style="width: 100%">
            <el-option v-for="(item, index) in labelOptions" :id="item.id" :key="index"
            :label="item.fullName" :value="item.id"></el-option>
          </el-select> -->
          <el-select
            v-model="tagConfigForm.tag"
            placeholder="请选择题目标签"
            :style="{ width: '100%' }"
          >
            <el-option
              v-for="(item, index) in labelsOptions"
              :key="index"
              :label="item.fullName"
              :value="item.enCode"
              :disabled="item.disabled"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showTagConfig = false">取 消</el-button>
        <el-button type="primary" @click="submitTagConfig">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 编辑弹框 -->
    <edit-question-dialog :visible.sync="showEdit"></edit-question-dialog>

    <div class="pagination-container">
      <el-pagination 
        @size-change="handleSizeChange" 
        @current-change="handleCurrentChange" 
        :current-page="currentPage"
        :page-sizes="[10,20,50,100]" 
        :page-size="pageSize" 
        layout="sizes, prev, pager, next, total" 
        :total="total">
      </el-pagination>
    </div>

    <!-- 导入文件对话框 -->
    <import-question-form ref="importForm" @refresh="getList" />

    <!-- 图片上传对话框 -->
    <el-dialog title="上传图片" :visible.sync="showUploadImg" width="500px" :close-on-click-modal="false">
      <UploadImg
        v-model="currentUploadFiles"
        :modular="'test'"
        :type="'question'"
        :limit="1"
        @change="handleUploadImgChange"
      />
      <div slot="footer" class="dialog-footer">
        <el-button @click="showUploadImg = false">取 消</el-button>
        <el-button type="primary" @click="confirmUploadImg">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import SearchForm from "@/components/search-form";
import SearchTable from "@/components/search-table";
import EditQuestionDialog from '@/components/test/editQuestionDialog.vue';
import UploadImg from '@/components/Generator/components/Upload/UploadImg.vue';
import ImportQuestionForm from '@/components/test/ImportQuestionForm.vue';
import inputTi from '@/views/exam/questionLibrary/question/components/inputTi2.vue';
import { getQuestionList, batchCreate, batchDelete, batchUpdate, batchUpdateLabels, download } from "@/api/test/question";

export default {
  name: "UserManagement",
  components: {
    SearchForm,
    SearchTable,
    EditQuestionDialog,
    UploadImg,
    ImportQuestionForm,
    inputTi
  },
  data() {
    return {
      isAdding: false,
      isEdit: false,
      isDetail: false,
      isEditMode: false,
      showTagConfig: false,
      tagConfigForm: {
        id: '',
        tag: ''
      },
      tagConfigRules: {
        tag: [
          { required: true, message: '请输入题目标签', trigger: 'blur' }
        ]
      },
      showChange: false,
      questionTitle: "",
      questionList: {
        questionType1: [{
          title: "",
          answer: "1",
          keyword: "",
          difficultyGradeId: "1"
        }],
        questionType2: [{
          title: "",
          answer: "",
          keyword: "",
          difficultyGradeId: "1"
        }],
        questionType3: [{
          title: "",
          keyword: "",
          difficultyGradeId: "1",
          options: [{
            label: 'A',
            content: "",
            img: "",
          }, {
            label: 'B',
            content: "",
            img: "",
          }, {
            label: 'C',
            content: "",
            img: "",
          }, {
            label: 'D',
            content: "",
            img: "",
          }],
          checkList: []
        }],
        questionType4: [{
          title: "",
          answer: "",
          keyword: "",
          difficultyGradeId: "1"
        }]
      },
      questionType: 4,
      form: {},
      questionTypeList: [
        {
          value: 0,
          title: "选择"

        }, {
          value: 0,
          title: "判断"

        }, {
          value: 0,
          title: "问答"

        }, {
          value: 0,
          title: "填空"

        }
      ],
      direction: "rtl",
      showAdd: false,
      showEdit: false,
      editForm: {
        type: '',
        content: '',
        level: ''
      },
      editRules: {
        type: [
          { required: true, message: '请选择题型', trigger: 'change' }
        ],
        content: [
          { required: true, message: '请输入题干', trigger: 'blur' }
        ],
        level: [
          { required: true, message: '请选择试题等级', trigger: 'change' }
        ]
      },
      userFormLine: {
        labels: "",
        title: "",
        enabledMark: null,
        orderByColumn: "lastModifyTime",
        isAsc: "desc",
        parentId: ""
      },
      tableData: [],
      multipleSelection: [],
      selectedRow: null,
      selectedIndex: null,
      questionTypeOptions: [
        { label: '单选题', value: '1' },
        { label: '多选题', value: '2' },
        { label: '判断题', value: '3' },
        { label: '填空题', value: '4' },
        { label: '问答题', value: '5' }
      ],
      questionLevelOptions: [
        { label: '简单', value: '1' },
        { label: '中等', value: '2' },
        { label: '困难', value: '3' }
      ],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      hasQuestions: false, // 添加标志位
      allQuestions: [], // 存储所有题目的数组
      isSearching: false,
      showImport: false,
      importFile: null,
      showUploadImg: false,
      currentUploadFiles: [],
      currentUploadItem: null,
      labelsOptions: [],
      labelListOptions: [],
    };
  },
  created() {
    this.getList();
    this.getLabelsOptions();
  },
  methods: {
    // 获取 标签 选项
    getLabelsOptions() {
      this.$store
        .dispatch("base/getDictionaryData", {
          encode: "questionLabels",
        })
        .then((res) => {
          this.labelsOptions = res;
          // 转换
          let arr = [];
          for(let i in res) {
            let obj = {};
            obj.fullName = res[i].fullName;
            obj.id = res[i].enCode;
            arr.push(obj);
          }
          this.labelListOptions = arr;
        });
    },
    submitTagConfig() {
      this.$refs.tagConfigForm.validate((valid) => {
        if (valid) {
          // 只包含必要的字段和修改的字段
          const updateData = this.multipleSelection.map(item => ({
            id: item.id,
            labels: this.tagConfigForm.tag, // 将标签数组转为逗号分隔字符串
            questionType: item.questionType,
            title: item.title,
            keyword: item.keyword,
            difficultyGradeId: item.difficultyGradeId,
            answers: item.answers,
            options: item.options,
            enabledMark: item.enabledMark ? "1" : "0"
          }));
          // 调用更新接口
          batchUpdateLabels(updateData)
            .then(res => {
              if (res.code === 200) {
                this.$message({
                  message: '标签配置保存成功',
                  type: 'success'
                });
                this.showTagConfig = false;
                // 重置表单
                this.$refs.tagConfigForm.resetFields();
                // 刷新列表
                this.getList();
              } else {
                this.$message.error(res.msg || '标签配置保存失败');
              }
            })
            .catch(error => {
              console.error('标签配置保存失败:', error);
              this.$message.error('标签配置保存失败');
            });
        } else {
          return false;
        }
      });
    },
    close(val) {
      this.showChange = val
    },
    handleQuestionTypeSelect(val) {
      let newQuestion;
      
      if (val == 1) {
        newQuestion = {
          type: 1, // 添加题型标识
          title: "",
          answer: "1",
          keyword: "",
          description: "",
          difficultyGradeId: "1",
          titimgs: [] // 添加题目图片数组
        };
      } else if (val == 2) {
        newQuestion = {
          type: 2,
          title: "",
          answer: "",
          keyword: "",
          description: "",
          difficultyGradeId: "1",
          titimgs: [] // 添加题目图片数组
        };
      } else if (val == 3) {
        newQuestion = {
          type: 3,
          title: "",
          keyword: "",
          description: "",
          difficultyGradeId: "1",
          options: [{
            label: 'A',
            content: "",
            img: "",
          }, {
            label: 'B',
            content: "",
            img: "",
          }, {
            label: 'C',
            content: "",
            img: "",
          }, {
            label: 'D',
            content: "",
            img: "",
          }],
          checkList: [],
          titimgs: [] // 添加题目图片数组
        };
      } else if (val == 4) {
        newQuestion = {
          type: 4,
          title: "",
          answer: "",
          keyword: "",
          description: "",
          difficultyGradeId: "1",
          titimgs: [] // 添加题目图片数组
        };
      }
      
      // 将新题目添加到列表末尾
      this.allQuestions.push(newQuestion);
      this.hasQuestions = true;
    },
    todelete(index) {
      this.allQuestions.splice(index, 1);
      if (this.allQuestions.length === 0) {
        this.hasQuestions = false;
      }
    },
    handleSelectionChange(selection) {
      // if (selection.length > 0) {
      //   // 如果当前选中的不是之前选中的行，则清空之前的选择
      //   if (this.selectedRow && this.selectedRow !== selection[0]) {
      //     this.$refs.multipleTable.clearSelection();
      //     this.$refs.multipleTable.toggleRowSelection(selection[0]);
      //   }
      //   this.selectedRow = selection[0];
      //   // 记录选中行的序号（索引+1）
      //   this.selectedIndex = this.tableData.indexOf(this.selectedRow) + 1;
      // } else {
      //   this.selectedRow = null;
      //   this.selectedIndex = null;
      // }
      this.multipleSelection = selection;
    },
    handleEdit(row) {
      this.isEdit = true;
      this.isEditMode = true;
      this.isDetail = false;

      // 清空现有题目列表
      this.allQuestions = [];
      
      // 创建新的题目对象
      let newQuestion;
      
      // 根据题目类型创建对应的数据结构
      let questionTypes = this.getQuestionNum(row.questionType);

      let difs = 1;
      if(row.difficultyGradeId == '简单') {
        difs = 1;
      } else if(row.difficultyGradeId == '中等') {
        difs = 2;
      } else if(row.difficultyGradeId == '困难') {
        difs = 3;
      }

      switch (questionTypes) {
        case 1: // 判断题
          newQuestion = {
            parentId: row.parentId || "",  // 父级id
            type: 1,
            title: row.title || "",
            description: row.description || "",
            answer: row.answers || "1",
            keyword: row.keyword || row.title || "",  // 初始化时使用 title 值
            difficultyGradeId: difs || "1",
            id: row.id, // 保存id用于更新
            titimgs: row.titimgs ? JSON.parse(row.titimgs) : [] // 添加题目图片数组
          };
          break;
        case 2: // 填空题
          newQuestion = {
            parentId: row.parentId || "",  // 父级id
            type: 2,
            title: row.title || "",
            description: row.description || "",
            answer: row.answers || "",
            keyword: row.keyword || row.title || "",  // 初始化时使用 title 值
            difficultyGradeId: difs || "1",
            id: row.id,
            titimgs: row.titimgs ? JSON.parse(row.titimgs) : [] // 添加题目图片数组
          };
          break;
        case 3: // 选择题
          let options = [];
          try {
            options = JSON.parse(row.options || '[]');
          } catch (e) {
            options = [{
              label: 'A',
              content: "",
              img: "",
            }, {
              label: 'B',
              content: "",
              img: "",
            }, {
              label: 'C',
              content: "",
              img: "",
            }, {
              label: 'D',
              content: "",
              img: "",
            }];
          }

          let answers = [];
          try {
            answers = JSON.parse(row.answers || '[]');
          } catch (e) {
            answers = [];
          }

          newQuestion = {
            parentId: row.parentId || "",  // 父级id
            type: 3,
            title: row.title || "",
            description: row.description || "",
            keyword: row.keyword || row.title || "",  // 初始化时使用 title 值
            difficultyGradeId: difs || "1",
            options: options,
            checkList: answers,
            id: row.id,
            titimgs: row.titimgs ? JSON.parse(row.titimgs) : [] // 添加题目图片数组
          };
          break;
        case 4: // 问答题
          newQuestion = {
            parentId: row.parentId || "",  // 父级id
            type: 4,
            title: row.title || "",
            description: row.description || "",
            answer: row.answers || "",
            keyword: row.keyword || row.title || "",  // 初始化时使用 title 值
            difficultyGradeId: difs || "1",
            id: row.id,
            titimgs: row.titimgs ? JSON.parse(row.titimgs) : [] // 添加题目图片数组
          };
          break;
      }

      // 将新题目添加到列表中
      if (newQuestion) {
        // 添加 watch 来实现双向绑定
        this.$watch(() => newQuestion.keyword, (newVal) => {
          newQuestion.title = newVal;
        });
        
        newQuestion.labels = row.labels;
        this.allQuestions.push(newQuestion);
        this.hasQuestions = true;
      }
      
      this.currentUploadItem = newQuestion
      // 显示抽屉
      this.showAdd = true;
    },
    resetForm() {
      this.userFormLine = {
        labels: "",
        title: "",
        enabledMark: null,
        orderByColumn: "lastModifyTime",
        isAsc: "desc"
      };
      this.currentPage = 1;
      this.isSearching = false;
      this.getList();
    },
    submitEdit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 添加新记录到表格
          this.editTableData.unshift({
            type: this.editForm.type === '1' ? '单选题' : this.editForm.type === '2' ? '多选题' : '判断题',
            content: this.editForm.content,
            level: this.editForm.level === '1' ? '必考' : '选考'
          });
          this.$message({
            message: '添加成功',
            type: 'success'
          });
          // 重置表单
          this.resetForm(formName);
        } else {
          return false;
        }
      });
    },
    handleEditRow(row) {
      // 将选中行的数据填充到表单中
      this.editForm = {
        type: row.type === '单选题' ? '1' : row.type === '多选题' ? '2' : '3',
        content: row.content,
        level: row.level === '必考' ? '1' : '2'
      };
    },
    handleDeleteRow(index) {
      this.$confirm('确认删除该条记录?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.editTableData.splice(index, 1);
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    checkSelectable(row, index) {
      // // 如果已经有选中的行，且不是当前行，则不允许选中
      // if (this.selectedRow && this.selectedRow !== row) {
      //   return false;
      // }
      return true;
    },
    handleTagConfigClick() {
      if (this.multipleSelection.length === 0) {
        this.$message.warning('请至少选择一条记录');
        return;
      }
      this.showTagConfig = true;
      // 重置表单
      this.tagConfigForm = {
        id: this.multipleSelection.map(item => item.id),
        tag: [],
      }
    },
    checkSelectedRow() {
      if (!this.selectedRow) {
        this.$message({
          message: '请先选择一条记录',
          type: 'warning'
        });
        return false;
      }
      return true;
    },
    async getList() {
      try {
        let params = {
          currentPage: this.currentPage,
          pageSize: this.pageSize
        };

        // 只有在点击搜索按钮时才添加搜索条件
        if (this.isSearching) {
          // 只添加有值的筛选条件
          if (this.userFormLine.labels) {
            params.labels = this.userFormLine.labels;
          }
          if (this.userFormLine.title) {
            params.title = this.userFormLine.title;
          }
          if (this.userFormLine.enabledMark !== null) {
            params.enabledMark = this.userFormLine.enabledMark;
          }
          if (this.userFormLine.parentId) {
            params.parentId = this.userFormLine.parentId;
          }
        }

        const response = await getQuestionList(params);
        if (response && response.data) {
          this.tableData = response.data.list.map(item => ({
            ...item,
            enabledMark: item.enabledMark === "启用" // 将 "启用"/"禁用" 转换为 true/false
          }));
          this.total = parseInt(response.data.pagination.total);
          this.currentPage = parseInt(response.data.pagination.currentPage);
          this.pageSize = parseInt(response.data.pagination.pageSize);
        }
      } catch (error) {
        console.error("Error fetching list:", error);
        this.$message.error("获取列表失败");
      }
    },
    onSubmit() {
      this.currentPage = 1;
      this.isSearching = true;
      this.getList();
    },
    submitQuestion() {

      // 防止重复点击
      if (this.isAdding) return;
      this.isAdding = true;

      // 直接使用 allQuestions 数组转换为提交格式
      const submitData = this.allQuestions.map((item) => {
        // 基础参数
        const params = {
          folders: "[\"638100473177446981\"]",
          analysis: "",  // 答案解析
          analysisimgs: "",  // 答案解析图片
          answers: "",  // 答案
          creatorTime: "",  // 创建时间
          creatorUserId: "",  // 创建用户
          deleteMark: "",  // 删除标记
          deleteTime: "",  // 删除时间
          deleteUserId: "",  // 删除用户
          difficultyGradeId: item.difficultyGradeId || "1",  // 试题等级id
          enabledMark: "1",  // 有效标记
          folderId: "638100473177446981",  // 题库id
          labels: null,  // 标签设置为空
          lastModifyTime: "",  // 修改时间
          lastModifyUserId: "",  // 修改用户
          opimgs: "",  // 选项图片
          optionRandom: "",  // 选项打乱
          options: "",  // 选项
          parentId: item.parentId || "",  // 父级id
          questionType: this.getQuestionName(item.type),  // 题型
          titimgs: JSON.stringify(item.titimgs || []),  // 题干图片数组
          title: item.title || "",  // 使用 keyword 作为新的 title
          keyword: item.keyword || "",  // 使用输入的关键字
          description: item.description ||"",  // 描述
        };

        // 如果是编辑模式，添加id
        if (this.isEdit && item.id) {
          params.id = item.id;
        }

        // 根据题型设置特定字段
        switch (item.type) {
          case 1: // 判断题
            params.answers = item.answer || "1";
            let options1 = [
              {
                title: '正确',
                content: 1,
                isanswer: item.answer == '1' ? true : false,
                myanswer: false
              },
              {
                title: '错误',
                content: 0,
                isanswer: item.answer == '0' ? true : false,
                myanswer: false
              }
            ]
            params.options = JSON.stringify(options1);
            break;
          case 2: // 填空题
            params.answers = item.answer || "";
            break;
          case 3: // 选择题
            let options = [];
            item.options.forEach(opt => {
              if (opt.content || opt.img) {
                options.push({
                  label: opt.label,
                  content: opt.content || "",
                  img: opt.img || "",
                  isanswer: item.checkList.indexOf(opt.label) > -1 ? true : false,
                  myanswer: false
                });
              }
            });
            params.options = JSON.stringify(options);
            params.answers = JSON.stringify(item.checkList);
            break;
          case 4: // 问答题
            params.answers = item.answer || "";
            break;
        }
        return params;
      });

      if (this.isEdit && !submitData[0].description) {
        this.$message.error('题干关键字不能为空');
        this.isAdding = false;
        return;
      }
      if (!this.isEdit) {
        // 多条数据判断
        let uniq = false;
        submitData.forEach((item, index) => {
          if (!item.description) {
            this.$message.error(`第${index + 1}道题目未输入题干关键字`);
            uniq = true;
            this.isAdding = false;
            return false;
          }
        });
        if (uniq) {
          this.isAdding = false;
          return;
        }
      }
      // 根据是否是编辑模式选择对应的接口
      const apiCall = this.isEdit ? batchUpdate(submitData[0].id, submitData[0]) : batchCreate(submitData);
      apiCall.then(res => {
        if (res.code === 200) {
          this.$message({
            type: 'success',
            message: this.isEdit ? '更新成功' : '添加成功'
          });
          this.showAdd = false;
          this.getList();
        } else {
          this.$message.error(res.msg || (this.isEdit ? '更新失败' : '添加失败'));
        }
        this.isAdding = false;
      }).catch(error => {
        this.isAdding = false;
        console.error(this.isEdit ? '更新失败:' : '添加失败:', error);
        this.$message.error(this.isEdit ? '更新失败' : '添加失败');
      });
    },
    cancelForm() {
      this.showAdd = false;
    },
    addOption(question) {
      if (!question.options) {
        this.$set(question, 'options', []);
      }
      const nextLabel = String.fromCharCode(65 + question.options.length);
      const newOption = {
        label: nextLabel,
        content: "",
        img: ""
      };
      question.options.push(newOption);
      // 强制更新视图
      this.$forceUpdate();
    },
    deleteOption(question, index) {
      if (question.options.length > 2) { // Maintain at least 2 options
        question.options.splice(index, 1);
        // Update labels for remaining options
        question.options.forEach((option, idx) => {
          option.label = String.fromCharCode(65 + idx);
        });
        // Remove deleted option from checkList if it was selected
        const deletedLabel = String.fromCharCode(65 + index);
        const checkListIndex = question.checkList.indexOf(deletedLabel);
        if (checkListIndex > -1) {
          question.checkList.splice(checkListIndex, 1);
        }
      }
    },
    selectDifficulty(item, level) {
      if (!this.isDetail) {
        item.difficultyGradeId = level;
      }
    },
    // selectDifficulty(item, difficulty) {
    //   item.difficultyGradeId = difficulty;
    // },
    selectAnswer(item, answer) {
      item.answer = answer;
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getList();
    },
    async handleStatusChange(row) {
      try {
        // 将布尔值转换为对应的数字状态
        const statusText = row.enabledMark ? "1" : "0";
        
        // 只传递必要的字段
        const updateData = {
          id: row.id,
          enabledMark: statusText,
          questionType: row.questionType,
          title: row.title,
          description: row.description,
          keyword: row.keyword,
          difficultyGradeId: row.difficultyGradeId,
          answers: row.answers,
          options: row.options
        };

        // 调用更新接口
        const response = await batchUpdate(row.id, updateData);

        if (response.code === 200) {
          this.$message({
            type: 'success',
            message: `状态已更新为${row.enabledMark ? "启用" : "禁用"}`
          });
          // 更新成功后刷新列表
          this.getList();
        } else {
          // 如果更新失败，回滚状态
          row.enabledMark = !row.enabledMark;
          this.$message.error(response.msg || '更新状态失败');
        }
      } catch (error) {
        // 发生错误时回滚状态
        row.enabledMark = !row.enabledMark;
        console.error("Error updating status:", error);
        this.$message.error("更新状态失败");
      }
    },
    deleteRow(index, tableData) {
      const row = tableData[index];
      this.$confirm('此操作将永久删除该题目, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        batchDelete(row.id).then(res => {
          if (res.code === 200) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.getList(); // 刷新列表
          } else {
            this.$message.error(res.msg || '删除失败');
          }
        }).catch(error => {
          console.error('删除题目失败:', error);
          this.$message.error('删除失败');
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    handleDetail(row) {
      this.isDetail = true;
      this.isEdit = false;
      this.isEditMode = false;

      // 清空现有题目列表
      this.allQuestions = [];
      
      // 创建新的题目对象
      let newQuestion;
      
      // 根据题目类型创建对应的数据结构
      let questionTypes = this.getQuestionNum(row.questionType);
      
      let difs = 1;
      if(row.difficultyGradeId == '简单') {
        difs = 1;
      } else if(row.difficultyGradeId == '中等') {
        difs = 2;
      } else if(row.difficultyGradeId == '困难') {
        difs = 3;
      }

      switch (Number(questionTypes)) {
        case 1: // 判断题
          newQuestion = {
            type: 1,
            title: row.title || "",
            description: row.description || "",
            answer: row.answers || "1",
            keyword: row.keyword || "",
            difficultyGradeId: difs || "1",
            titimgs: row.titimgs ? JSON.parse(row.titimgs) : [] // 添加题目图片数组
          };
          break;
        case 2: // 填空题
          newQuestion = {
            type: 2,
            title: row.title || "",
            description: row.description || "",
            answer: row.answers || "",
            keyword: row.keyword || "",
            difficultyGradeId: difs || "1",
            titimgs: row.titimgs ? JSON.parse(row.titimgs) : [] // 添加题目图片数组
          };
          break;
        case 3: // 选择题
          let options = [];
          try {
            options = JSON.parse(row.options || '[]');
          } catch (e) {
            options = [{
              label: 'A',
              content: "",
              img: "",
            }, {
              label: 'B',
              content: "",
              img: "",
            }, {
              label: 'C',
              content: "",
              img: "",
            }, {
              label: 'D',
              content: "",
              img: "",
            }];
          }

          let answers = [];
          try {
            answers = JSON.parse(row.answers || '[]');
          } catch (e) {
            answers = [];
          }

          newQuestion = {
            type: 3,
            title: row.title || "",
            description: row.description || "",
            keyword: row.keyword || "",
            difficultyGradeId: difs || "1",
            options: options,
            checkList: answers,
            titimgs: row.titimgs ? JSON.parse(row.titimgs) : [] // 添加题目图片数组
          };
          break;
        case 4: // 问答题
          newQuestion = {
            type: 4,
            title: row.title || "",
            description: row.description || "",
            answer: row.answers || "",
            keyword: row.keyword || "",
            difficultyGradeId: difs || "1",
            titimgs: row.titimgs ? JSON.parse(row.titimgs) : [] // 添加题目图片数组
          };
          break;
      }

      // 将新题目添加到列表中
      if (newQuestion) {
        this.allQuestions.push(newQuestion);
        this.hasQuestions = true;
      }

      // 显示抽屉
      this.showAdd = true;
    },
    handleDelete(row) {
      this.$confirm('此操作将永久删除该题目, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        batchDelete(row.id).then(res => {
          if (res.code === 200) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.getList(); // 刷新列表
          } else {
            this.$message.error(res.msg || '删除失败');
          }
        }).catch(error => {
          console.error('删除题目失败:', error);
          this.$message.error('删除失败');
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    handleAdd() {
      this.isEdit = false;
      this.isEditMode = false;
      this.isDetail = false;
      this.allQuestions = []; // 清空题目列表
      this.hasQuestions = false;
      this.showAdd = true;
    },
    // 添加获取题型名称的方法
    getQuestionTypeName(type) {
      switch (type) {
        case 1:
          return '判断题';
        case 2:
          return '填空题';
        case 3:
          return '选择题';
        case 4:
          return '问答题';
        default:
          return '';
      }
    },
    getQuestionNumTypes(type) {
      switch (type) {
        case 'determine':
          return '判断题';
        case 'blank':
          return '填空题';
        case 'multiple':
          return '选择题';
        case 'selectTi':
          return '选择题';
        case 'answers':
          return '问答题';
        default:
          return '';
      }
    },
    getQuestionName(type) {
      switch (type) {
        case 1:
          return 'determine';
        case 2:
          return 'blank';
        case 3:
          return 'multiple';
        case 4:
          return 'answers';
        default:
          return '';
      }
    },
    getQuestionNum(type) {
      switch (type) {
        case 'determine':
          return 1;
        case 'blank':
          return 2;
        case 'multiple':
          return 3;
        case 'answers':
          return 4;
        default:
          return '';
      }
    },
    handleImport() {
      this.$refs.importForm.init();
    },
    handleFileChange(file) {
      this.importFile = file;
    },
    // 图片上传对话框-上传
    handleUploadImgChange(files) {
      this.currentUploadFiles = files;
    },
    // 图片上传对话框-提交
    confirmUploadImg() {
      if (this.currentUploadFiles.length > 0) {
        const file = this.currentUploadFiles[0];
        if (this.currentUploadItem) {
          // 如果是选择题的选项
          if (this.currentUploadItem.type === 3 && this.currentUploadItem.options) {
            // 找到当前正在编辑的选项
            const currentOption = this.currentUploadItem.options.find(opt => opt.content === '');
            if (currentOption) {
              currentOption.img = file.url;
            }
          } else {
            // 其他题型的题干图片
            this.currentUploadItem.titimgs = file.url;
          }
        }
      }
      this.showUploadImg = false;
    },
    // 选择题-标题
    titleChange(val, idx) {
      this.allQuestions[idx].title = val;
    },
    titimgChange(val, idx) {
      this.allQuestions[idx].titimgs = [];
      if (val) {
        this.allQuestions[idx].titimgs.push(val);
      }
      // if (this.allQuestions[idx].titimgs.indexOf(val) == -1) {
      //   this.allQuestions[idx].titimgs.push(val);
      // }
    },
    // 选择题-选项
    titleChoiceChange(val, idx, cIdx) {
      this.allQuestions[idx].options[cIdx].content = val;
    },
    titChoiceImgChange(val, idx, cIdx) {
      this.allQuestions[idx].options[cIdx].img = [];
      if (val) {
        this.allQuestions[idx].options[cIdx].img.push(val);
      }
      // if (typeof this.allQuestions[idx].options[cIdx].img === 'string' && this.allQuestions[idx].options[cIdx].img === "") {
      //   this.allQuestions[idx].options[cIdx].img = [];
      // }
      // if (this.allQuestions[idx].options[cIdx].img.indexOf(val) == -1) {
      //   this.allQuestions[idx].options[cIdx].img.push(val);
      // }
    },

    /**
     * 没有用到的
     */
    keywordChange(val) {
      this.currentUploadItem.keyword = val;
    },
    submitImport() {
      if (!this.importFile) {
        this.$message.warning('请选择要上传的文件');
        return;
      }
      
      // 创建 FormData 对象
      const formData = new FormData();
      formData.append('file', this.importFile.raw);
      
      // TODO: 调用导入接口
      // 这里需要添加实际的文件上传接口调用
      // importQuestions(formData).then(res => {
      //   if (res.code === 200) {
      //     this.$message.success('导入成功');
      //     this.showImport = false;
      //     this.getList();
      //   } else {
      //     this.$message.error(res.msg || '导入失败');
      //   }
      // }).catch(error => {
      //   console.error('导入失败:', error);
      //   this.$message.error('导入失败');
      // });
      
      // 临时提示
      this.$message.info('文件上传功能待实现');
      this.showImport = false;
    },
    downloadTemplate() {
      download().then(res => {
        if (res.code === 200 && res.data) {
          const link = document.createElement('a');
          // 添加服务器地址前缀
          const baseURL = process.env.VUE_APP_BASE_API || '';
          link.href = baseURL + res.data.url;
          link.download = res.data.name;
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
        } else {
          this.$message.error('下载模板失败');
        }
      }).catch(error => {
        console.error('下载模板失败:', error);
        this.$message.error('下载模板失败');
      });
    },
    handleUploadClick(item) {
      this.currentUploadItem = item;
      this.currentUploadFiles = [];
      this.showUploadImg = true;
    },
    // === 没有调用到 ===
    addQuestion() {
      if (this.questionType == 1) { // 判断题
        this.questionList.questionType1.push({
          title: "",
          description: "",
          answer: "1",
          keyword: "",
          difficultyGradeId: "1"
        });
      }
      if (this.questionType == 2) { // 填空题
        this.questionList.questionType2.push({
          title: "",
          description: "",
          answer: "",
          keyword: "",
          difficultyGradeId: "1"
        });
      }
      if (this.questionType == 3) { // 选择题
        this.questionList.questionType3.push({
          title: "",
          description: "",
          keyword: "",
          difficultyGradeId: "1",
          options: [{
            label: 'A',
            content: "",
            img: "",
          }, {
            label: 'B',
            content: "",
            img: "",
          }, {
            label: 'C',
            content: "",
            img: "",
          }, {
            label: 'D',
            content: "",
            img: "",
          }],
          checkList: []
        });
      }
      if (this.questionType == 4) { // 问答题
        this.questionList.questionType4.push({
          title: "",
          description: "",
          answer: "",
          keyword: "",
          difficultyGradeId: "1"
        });
      }
    },
  }
};
</script>
<style scoped lang="scss">
.headerOption {
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
}
.addOptionBtn {
  width: 50px;
  height: 30px;
  line-height: 30px;
  margin-left: 12px;
  background: #f6f8fc;
  border-radius: 4px;
  font-size: 16px;
  color: #536387;
  text-align: center;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}
.set-table-right {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;

  .config-btn {
    width: 120px;
    height: 32px;
    line-height: 0;
    padding: 8px 15px;
  }

  .common-btn {
    height: 32px;
    line-height: 0;
    padding: 8px 15px;
  }
}

.send {
  background-color: #2265EE;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
}

.save {
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #393939;
}

.newContent {
  width: 100%;

  display: flex;
  flex-direction: column;

  position: relative;
  background: #FFFFFF;
  border-radius: 4px;
  border: 1px solid #E2E7F5;

  .header {

    position: relative;

    .number {
      width: 23px;
      height: 20px;

      font-weight: 400;
      font-size: 12px;
      color: #393939;
      line-height: 20px;
      text-align: left;
      font-style: normal;
      position: absolute;
      top: 2px;
      right: 32px;
      width: 24px;
      height: 24px;
    }

    .logo {
      position: absolute;
      top: 0;
      right: 0;
      width: 24px;
      height: 24px;
      left: inherit;
    }
  }

  .item {
    padding: 24px;
    box-sizing: border-box;

    .trapezoid {
      width: 100%;
      height: 12px;
      background: #F6F8FC;
      transform: skew(-20deg);
      margin: 20px 0 0 0;
      cursor: pointer;
      transition: background-color 0.3s ease;

      &:hover,
      &.active {
        background: rgba(34, 101, 238, 0.3);
      }
    }

    .trapezoid2 {
      width: 100%;
      height: 12px;
      background: #F6F8FC;
      transform: skew(-20deg);
      margin: 20px 0 0 0;
      cursor: pointer;
      transition: background-color 0.3s ease;

      &:hover,
      &.active {
        background: rgba(34, 101, 238, 0.6);
      }
    }

    .trapezoid3 {
      width: 100%;
      height: 12px;
      background: #F6F8FC;
      transform: skew(-20deg);
      margin: 20px 0 0 0;
      cursor: pointer;
      transition: background-color 0.3s ease;

      &:hover,
      &.active {
        background: #2265EE;
      }
    }

    .header2 {
      display: flex;
      flex-direction: row;
      align-items: center;

      .t1 {
        width: 16px;
        height: 16px;
      }

      .t2 {
        margin-left: 8px;
        font-weight: 500;
        font-size: 14px;
        color: #393939;
        display: flex;
        flex-direction: row;
        line-height: 20px;
        text-align: left;
        font-style: normal;

        .t21 {
          font-weight: 500;
          font-size: 12px;
          color: #536387;
          line-height: 20px;
          text-align: left;
          font-style: normal;
        }
      }


    }

    .txda {
      height: 100%;

      .xztitle {
        display: flex;
        margin-top: 8px;
        flex-direction: row;
        font-weight: 400;
        font-size: 14px;
        color: #323232;
        line-height: 20px;
        text-align: left;
        font-style: normal;


        align-items: center;
      }

      .tktitle {
        display: flex;
        margin-top: 8px;
        font-weight: 400;
        font-size: 14px;
        color: #323232;
        line-height: 20px;
        text-align: left;
        font-style: normal;


        align-items: center;
      }
    }

    .twobutton {
      display: flex;
      flex-direction: row;
      gap: 12px;

      .button1 {
        width: 60px;
        height: 32px;
        background: #F6F8FC;
        border-radius: 4px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 14px;
        color: #536387;
        line-height: 20px;
        text-align: left;
        font-style: normal;
        cursor: pointer;
        transition: all 0.3s ease;

        &:hover {
          background: rgba(34, 101, 238, 0.6);
          color: #FFFFFF;
        }

        &.active {
          background: #2265EE;
          color: #FFFFFF;
        }

        &.disabled {
          cursor: not-allowed;
          opacity: 0.7;

          &:hover {
            background: #F6F8FC;
            color: #536387;
          }

          &.active {
            background: #2265EE;
            color: #FFFFFF;
            opacity: 0.7;
          }
        }
      }
    }

    .trapezoid,
    .trapezoid2,
    .trapezoid3 {
      &.disabled {
        cursor: not-allowed;
        opacity: 0.7;

        &:hover {
          background: #F6F8FC;
        }

        &.active {
          opacity: 0.7;
        }
      }
    }


    .question2 {
      width: 100%;
      height: 90px;
      background: #F6F8FC;
      border-radius: 4px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 21px;
      color: #536387
    }

    .optionImg {
      width: 64px;
      height: 36px;
      margin-left: 12px;
      background: #F6F8FC;
      border-radius: 4px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 21px;
      color: #536387
    }
    .deleteOption {
      width: 100%;
      color: #D91515;
      font-size: 12px;
      cursor: pointer;
      text-align: center;
      height: 40px;
      line-height: 40px;
    }
  }
}

.addButton {
  margin-top: 24px;
  width: 100%;
  height: 80px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #FFFFFF;
  box-shadow: 0px 2px 24px -8px rgba(109, 123, 222, 0.5);
  border-radius: 4px;
  border: 1px solid #2265EE;

  img {
    width: 24px;
    height: 24px;
  }
}

.tag {
  padding: 0 12px;
  height: 28px;
  background: rgba(34, 101, 238, 0.06);
  border-radius: 3px;
  border: 1px solid #588fff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: #2265ee;
  line-height: 28px;
  text-align: left;
  font-style: normal;
}

.gizall {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.gizall {
  display: flex;
  width: 100%;
  flex-direction: row;
  gap: 6px;

  .gjz {
    /* width: 105px; */
    height: 28px;
    background: rgba(205, 205, 205, 0.3);
    border-radius: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
      Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
      sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: #536387;
    line-height: 28px;
    text-align: left;
    font-style: normal;
  }
}

::v-deep .el-icon-my-message {
  background: url("../../assets/images/important.png") no-repeat;
  width: 20px;
  height: 20px;
}

::v-deep .el-icon-my-message:before {
  content: "替";
  font-size: 20px;
  visibility: hidden;
}

::v-deep .el-icon-my-message {
  font-size: 18px;
}

::v-deep .el-icon-my-message:before {
  content: "\e611";
}

::v-deep .el-icon-my-add {
  background: url("../../assets/images/addPaper.png") no-repeat;
  width: 20px;
  height: 20px;
}

::v-deep .el-icon-my-add:before {
  content: "替";
  font-size: 20px;
  visibility: hidden;
}

::v-deep .el-icon-my-add {
  font-size: 18px;
}

::v-deep .el-icon-my-add:before {
  content: "\e611";
}

::v-deep .right-dialog {
  margin-top: 0 !important;
  /* 对话框宽度设置为窗口宽度的40% */
  margin-left: auto;
  /* 将对话框向右对齐 */
  left: auto;
  /* 确保对话框在右侧 */
  right: 0;
  /* 对话框紧贴窗口右侧 */
  top: 0;
  height: 100%;
  /* 对话框从窗口顶部开始 */
  position: fixed;
  /* 使用固定定位 */
}

::v-deep .el-dialog {
  .el-dialog__header {
    padding: 20px;
    border-bottom: 1px solid #E2E7F5;

    .el-dialog__title {
      font-size: 16px;
      font-weight: 500;
      color: #393939;
    }
  }

  .el-dialog__body {
    padding: 24px;
  }

  .el-form {
    .el-form-item {
      margin-bottom: 20px;

      .el-form-item__label {
        font-weight: 500;
        color: #393939;
      }
    }
  }
}

.tag-config-dialog {
  ::v-deep .el-dialog__body {
    padding: 24px;
  }

  ::v-deep .el-form-item {
    margin-bottom: 20px;

    .el-form-item__label {
      font-weight: 500;
      color: #333;
    }

    .el-input {
      width: 100%;

      .el-input__inner {
        height: 36px;
        line-height: 36px;
      }
    }
  }
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding-top: 24px;
  border-top: 1px solid #E2E7F5;

  .el-button {
    height: 36px;
    padding: 0 20px;
  }
}

.drawer-container {
  display: flex;
  height: 100%;
  
  .drawer-left {
    width: 200px;
    border-right: 1px solid #E2E7F5;
    
    .drawer-left-title {
      padding: 20px;
      font-size: 16px;
      font-weight: 500;
      color: #393939;
      border-bottom: 1px solid #E2E7F5;
    }
    
    .drawer-left-content {
      padding: 20px;
      display: flex;
      flex-direction: column;
      gap: 15px;
      
      .item {
        width: 100%;
        height: 80px;
        background: #f6f8fc;
        border-radius: 8px;
        display: flex;
        gap: 12px;
        justify-content: center;
        align-items: center;
        flex-direction: row;
        font-weight: 400;
        font-size: 16px;
        cursor: pointer;
        
        &:hover {
          background: #eef1f6;
        }

        .pic {
          width: 40px;
          height: 40px;
        }

        color: #323232;
        line-height: 22px;
        text-align: center;
        font-style: normal;
      }
    }
  }
  
  .drawer-right {
    flex: 1;
    padding: 0 24px;
    display: flex;
    flex-direction: column;
    overflow: auto;
  }
}

.empty-content {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  
  .empty-tip {
    font-size: 16px;
    color: #909399;
  }
}

.question-title {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  margin-bottom: 12px;
  padding-left: 8px;
}

.newContent {
  // 移除原有的序号显示
  .header {
    .number {
      display: none;
    }
  }
}

.import-header {
  margin-bottom: 20px;
  display: flex;
  justify-content: flex-end;
  
  .el-button {
    padding: 0;
    font-size: 14px;
    
    &:hover {
      color: #2265EE;
    }
    
    i {
      margin-right: 4px;
    }
  }
}

.upload-demo {
  text-align: center;
  
  .el-upload {
    width: 100%;
  }
  
  .el-upload-dragger {
    width: 100%;
  }
}

.pagination-container {
  display: flex;
  justify-content: flex-end;
  margin: 20px 0;
}

.input-wrapper {
  display: none; // 移除这个类的样式
}

::v-deep .bordered-input {
  width: 60%;
  // border: 1px solid #E2E7F5;     // =====修改图片上传需要去掉的=====
  .el-textarea {
    width: 60%;
    // border: 1px solid #E2E7F5;   // =====修改图片上传需要去掉的=====
    .el-textarea__inner {
      // border: 1px solid #E2E7F5; // =====修改图片上传需要去掉的=====
      border-radius: 4px;
      padding: 12px;
      background-color: #fff;
      
      // &:focus {
      //   border-color: #2265EE;
      // }
      
      // &:hover {
      //   border-color: #2265EE;
      // }
    }
  }
}

.demo-form-inline {
  position: relative;
  // padding-bottom: 52px;  // 为按钮预留空间
  
  .search-content {
    padding: 24px;
  }

  .search-row {
    margin: 0;
    
    .search-item {
      ::v-deep .el-form-item {
        margin-bottom: 0;
        display: flex;
        align-items: center;
        
        .el-form-item__label {
          width: 80px;
          text-align: right;
          padding-right: 12px;
          line-height: 32px;
        }
        
        .el-form-item__content {
          flex: 1;
          margin-left: 0 !important;
          
          .el-input,
          .el-select {
            width: 100%;
          }
        }
      }
    }
  }
}

.formRight-btn {
  // position: absolute;
  // bottom: 0;
  // right: 24px;
  // padding: 10px 0;
  // background-color: #fff;
  // z-index: 1;
    position: absolute !important;
    // bottom: 25px !important;
    right: 0;
    padding: 0;
    background-color: #fff;
    z-index: 1;
  
  .overPosBtn {
    margin-right: 8px;
  }
  
  .set-col-btn {
    background: #2265EE;
  }
}

.gjz.keywords {
  padding: 0 10px;
  font-size: 12px;
  color: #536387 !important;
  background: rgba(205,205,205,0.3);
  border-radius: 10px;
}



.item {
  .trapezoid {
    width: 100%;
    height: 12px;
    background: #F6F8FC;
    transform: skew(-20deg);
    margin: 20px 0 0 0;
    cursor: pointer;
    transition: background-color 0.3s ease;

    &:hover {
      opacity: 0.8;
    }

    &.active.trapezoid1 {
      background: rgba(34, 101, 238, 0.3);
    }

    &.active.trapezoid2 {
      background: rgba(34, 101, 238, 0.6);
    }

    &.active.trapezoid3 {
      background: #2265EE;
    }
  }
}
</style>